Uvod

Što je jQuery, zašto je toliko popularan i zašto baš njemu posvetiti ovih nekoliko stranica? Većina web developera će se složiti da je jQuery jedan od najkorisnijih alata kada je riječ o izradi web aplikacija. Naime, jQuery je JavaScript biblioteka koju je John Resig predstavio 2006. godine i tako zauvijek promijenio frontend development. Pojednostavljeno, jQuery omogućuje dodavanje funkcionalnosti koje nije moguće dobiti koristeći samo čisti HTML i CSS.

jQuery slogan „write less, do more“ ističe činjenicu da jQuery uvelike olakšava korištenje JavaScripta te skraćuje vrijeme potrebno za pisanje pojedinih funkcija. Naime, s jednom linijom jQuery kôda moguće je pozvati funkcionalnosti za koje je inače potrebno puno više rada i truda ukoliko se koristi klasični JavaScript kôd. Opće je poznato kako su web developeri ljudi koji žele napraviti što je više moguće, u što manje vremena, na što jednostavniji način, a jQuery upravo to i omogućuje.

jQuery je razvijen s namjerom da bude nadogradnja osnovnog JavaScript-a te da pojednostavi njegovu sintaksu i omogući bolju interakciju s drugim programskim jezicima.Osim toga, jQuery je u interakciji s Document Object Model-om (DOM), koji predstavlja platformu za suradnju s objektima u HTML, XHTML i XML dokumentima. Konkretno, DOM omogućuje dodavanje, uređivanje i brisanje elemenata na web stranici.

Slika 1. - DOM shema

Kako koristiti jQuery?

Kako koristiti jQuery? Vrlo jednostavno! jQuery je maksimalno pojednostavljen za korištenje i svatko tko ima barem malo osnovnog znanja o HTML-u i CSS-u trebao bi vrlo brzo shvatiti princip na kojem jQuery funkcionira.

Prvi korak podrazumijeva skidanje jquery.js sa https://code.jquery.com/ stranice.

Slika 2. - code.jquery.com stranica

Klikom na uncompressed ili minified link odabrane verzije jquery-ja, otvara se kod koji je potrebno integrirati u HTML dokument.

Slika 3. - Kod za integraciju jQuery-ja u HTML

Kopirani kod potrebno je smjestiti pri dnu html dokumenta, odnosno neposredno prije zatvorenog </body> taga. Postoji još nekoliko načina za preuzimanje jquery biblioteke, a postoje i različita mjesta za smještanje iste unutar html dokumenta, ali ovaj način je najjednostavniji i predstavlja najbolju praksu.

Slika 4. - Integrirani kod unutar HTML-a

Ono što je potrebno znati prije upuštanja u čari jQuery-ja, prilikom pisanja naredbi, jQuery koristi varijablu $ kao skraćenicu umjesto riječi jQuery. Dakle, window.jQery ima potpuno jednako značenje kao i window.$, a $(“div“) ima jednako značenje kao jQuery(“div“). Varijabla $ se češće koristi jer je kraća i osigurava bolju preglednost cijelog dokumenta.

Osnovni selektori (CSS)

Kod dinamičke promjene web stranice, potrebno je mijenjati sadržaj stranice pa je zbog toga potrebno pronaći elemente koje želimo mijenjati. jQuery omogućuje pronalaženje elemenata koristeći vrstu elementa, njihov ID, klasu, svojstva, vrijednost svojstava i slično.

Selektor elementa pronalazi sve elemente zadanog naziva elementa, a želimo li selektirati sve <p> odlomke na web stranici, koristimo selektor $('p');

ID Selektor koristi ID svojstva HTML elementa kako bi pronašao željeni element. ID svojstvo elementa mora biti jedinstveno, a za pronalaženje određenog identifikatora ispred imena ID-ja upisujemo # kao i u CSS-u.

<body>

<p>Primjer korištenja</p>

<p id="imeID">ID selektora</p>

<script type ="text/javascript">
$ (function(){
$('#imeID').css('color', 'blue')
});
</script>

</body>

Slika 5. - Uporaba ID selektora. Live primjer možete pogledati Ovdje

Selektor klase koristi svojstvo klase HTML elementa kako bi pronašao željeni element, a za pronalaženje elementa koji ima zadano svojstvo klase ispred imena klase upisujemo točku kao i u CSS-u.

<body>

<p>Primjer korištenja</p>

<p id="imeKlase">selektor klase</p>

<script type ="text/javascript">
$ (function(){
$('.imeKlase').css('color', 'blue')
});
</script>

</body>

Slika 6. - Uporaba selektora klase. Live primjer možete pogledati Ovdje

Osnovni događaji (events)

Događaji ili eventi su većinom potaknuti korisnikovom interakcijom sa stranicom. Tako postoje događaji koji određuju promjene na stranici tek onda kada korisnik primjerice klikne mišem na određeni dio stranice (slika, poveznica i sl.), ili kada samo prijeđe mišem preko tog dijela.

Događaji nisu vidljivi sve dok korisnik ne počne koristiti stranicu, odnosno vidljivi su samo na dijelovima na kojima je to unaprijed definirano (slika, poveznica i sl.).

.click .dblclick .mouseenter .mouseleave .hover

.click() je događaj kojim određujemo što će se dogoditi s nekim elementom ukoliko mišem kliknemo na njega ili na neki drugi element. Primjerice, klikom na jednu rečenicu, možemo napraviti da druga nestane. To ćemo učiniti tako da svakoj rečenici dodijelimo jedinstveni ID, koji ćemo kasnije upotrijebiti prilikom pisanja funkcije.

<body>

<p id="klik">Klikom na ovu rečenicu</p>
<p id="sakrij">Ova rečenica nestaje</p>

<script type ="text/javascript">
$ ('#klik').click(function(){
$('#sakrij').hide();
});
</script>

</body>

Slika 7. - Prikaz izvedbe .click događaja

.dblclick() je događaj kojim određujemo što će se dogoditi s nekim elementom ukoliko dva puta kliknemo mišem na taj ili neki drugi element.

<body>

<p id="dupliKlik">Dvostrukim Klikom na ovu rečenicu</p>
<p id="sakrij">Ova rečenica nestaje</p>

<script type ="text/javascript">
$ ('#dupliKlik').dblclick(function(){
$('#sakrij').hide();
});
</script>

</body>

Slika 8. - Prikaz izvedbe .dblclick događaja. Live primjer možete pogledati Ovdje

.mouseenter() je događaj kojim određujemo što će se dogoditi s nekim elementom ukoliko postavimo strelicu miša na taj ili neki drugi element.

<body>

<p id="mouse">Dolaskom miša na ovu rečenicu</p>
<p id="sakrij">Ova rečenica nestaje</p>

<script type ="text/javascript">
$ ('#mouse').mouseenter(function(){
$('#sakrij').hide();
});
</script>

</body>

Slika 9. - Prikaz izvedbe .mouseenter događaja. Live primjer možete pogledati Ovdje

.mouseleave() je događaj kojim određujemo što će se dogoditi s nekim elementom ukoliko strelicu miša maknemo s tog ili nekog drugog elementa.

<body>

<p id="mouse">Odlaskom miša s ove rečenice</p>
<p id="sakrij">Ova rečenica nestaje</p>

<script type ="text/javascript">
$ ('#mouse').mouseleave(function(){
$('#sakrij').hide();
});
</script>

</body>

Slika 10. - Prikaz izvedbe .mouseleave događaja

.hover() je događaj kojim određujemo što će se dogoditi s nekim elementom ukoliko strjelicom miša prijeđemo preko tog ili nekog drugog elementa.

<body>

<p id="hover">Prijelazom miša preko ove rečenice</p>
<p id="sakrij">Ova rečenica nestaje</p>

<script type ="text/javascript">
$ ('#hover').hover(function(){
$('#sakrij').hide();
});
</script>

</body>

Slika 11. - Prikaz izvedbe .hover događaja. Live primjer možete pogledati Ovdje

Osnovni efekti

Efekti u jQuery-ju služe za povećanje dinamičnosti stranice. S raznim efektima moguće je učiniti stranicu zanimljivijom i privlačnijom korisnicima. Naime, uz pomoć nekih efekata moguće je manipulirati sadržajem stranice na način da određene elemente prikazujete ili skrivate, mijenjate im veličinu, okrećete ih, i slično.

.hide .show .fadeIn .fadeOut .animate

.hide() i .show() su efekti koje dodajemo kako bismo neki element prikazali ili ga sakrili. Ukoliko želimo neki element prikazati ili sakriti, najbolje je napraviti button koji će to i omogućiti.

<body>

<button class="button1">Hide</button>
<button class="button2">Show</button>

<p>Primjer rečenice koja se pojavljije i nestaje.</p>

<script type ="text/javascript">

$ (document).ready(function(){
$('.button1').click(function(){
$('p').hide();
});

$('.button2').click(function(){
$('p').show();
});

});

</script>

</body>

Slika 12. - Prikaz izvedbe .hide i .show efekata. Live primjer možete pogledati Ovdje

.fadeIn() i .fadeOut() su efekti koje dodajemo kako bismo neki element prikazali ili ga sakrili. Razlikuje se od .hide i .show po tome što se odabrani element postepeno prikazuje ili skriva, odnosno moguće je prilagoditi vrijeme potrebno da se element prikaže ili sakrije.

<body>

<button class="button1">Hide</button>
<button class="button2">Show</button>

<p>Primjer rečenice koja se pojavljije i nestaje.</p>

<script type ="text/javascript">

$ (document).ready(function(){
$('.button1').click(function(){
$('p').fadeOut();
});

$('.button2').click(function(){
$('p').fadeIn();
});

});

</script>

</body>

<body>

Slika 13. - Prikaz izvedbe .fadeIn i fadeOut efekata. Live primjer možete pogledati Ovdje

.animate() je efekt koji dodajemo kako bismo 'pokrenuli' neki element. Uz .animate je moguće proširiti, suziti, povećati ili smanjiti neki element, čime povećavamo dinamičnost stranice

<body>

<button class="button1">Povećaj dužinu</button>
<button class="button2">Vrati dužinu</button>

<div id="box" style="background:green; height:100px;
width: 100px; margin:6px;"> </div>

<script type = "text/javascript">

$ (document).ready(function(){
$('.button1').click(function(){
$('#box').animate({height: "300px"});
});

$('.button2').click(function(){
$('#box').animate({height: "100px"});
});

});

</script>

</body>

Slika 14. - Prikaz izvedbe .animate efekta. Live primjer možete pogledati Ovdje

Prednosti i nedostaci uporabe jQuery-ja

jQuery ima mnogo prednosti, zbog čega je i dobio titulu najpopularnije JavaScript biblioteke na tržištu. Jedna od velikih prednosti je to što se ponaša relativno slično u različitim browserima, a svaki web developer, posebice onaj koji je zadužen za frontend, se barem jednom susreo s problemima različitog prikaza sadržaja u različitim browserima. Dakle ova prednost uvelike pomaže prilikom razvoja web aplikacije i skraćuje vrijeme developeru prilikom izrade aplikacije

Nadalje, jQuery je uistinu jednostavan za uporabu, vrlo je jednostavno pronaći potrebne informacije za njegovo korištenje, još je jednostavnije naučiti kako ga koristiti, a vrlo je lagano i primijeniti ga na konkretnoj aplikaciji. Vezano uz jednostavnost pronalaženja informacija, jQuery dokumentacija online je vrlo opširna i dolazi od različitih autora, što također olakšava razumijevanje i brže pronalaženje potrebnih informacija.

Web stranice koje koriste jQuery brže se učitavaju, a potreba svakog developera je omogućiti učitavanje stranice u samo nekoliko sekundi, što na kraju dovodi do zadovoljnog krajnjeg korisnika. jQuery pruža opciju učitavanja <div> tagova samo onda kada su potrebni korisniku, na taj način je moguće prikazati samo ono što korisnik treba vidjeti odmah kada se stranica učita, a ostalo učitavati po potrebi.

Što se tiče nedostataka, za mnoge su najveći problemi (barem do sada) bili brzina i veličina biblioteke. Kada je riječ o veličini, jQuery biblioteka sa svojih 96 KB zauzima manje mjesta od uobičajene JPG slike, a dodaci se mogu preuzimati zasebno, ovisno o potrebi. S druge strane, brzina je sve manji problem jer je svaka nova inačica jQuery biblioteke brža od prethodne.

Zaključno

Već je gotovo! Osnovno znanje i princip rada jQuery-ja već su usvojeni, a što je tek sve pred vama! Ovaj relativno kratak pregled osnovnih jQuery funkcionalnosti, ovdje je kako bi vas zainteresirao da istražite što se sve još krije u toj veličanstvenoj jQuery biblioteci!

Za one koji žele znati više!

jQuery upotrebljava AJAX (Asynchronous JavaScript and XML) funkcionalnosti koje omogućuju uporabu XMLHttpRequest-a za komunikaciju sa server stranom u različitim formatima (JSON, XML, HTML). Jednostavnije rečeno, kod klasičnih web aplikacija, ukoliko se želi promijeniti i najmanji detalj na stranici, potrebno je učitati cijelu stranicu sa svim podacima, ali uz pomoć AJAX-a to nije potrebno jer AJAX omogućuje izmjene na web stranici bez ponovnog pokretanja stranice, omogućuje slanje i primanje podataka od strane servera nakon što se stranica učitala i slanje podataka serveru u pozadini. Razvojem ovakve tehnologije dolazi do bržeg izvršavanja aplikacija, a povećava se i atraktivnost same aplikacije.

Literatura

http://andreehansson.se/the-basics-of-jquery/

https://jquery.org/history/

https://en.wikipedia.org/wiki/JQuery

http://www.cio.com/article/2394876/java/6-things-you-need-to-know-aboutjquery.html

http://www.sitepoint.com/whats-so-good-about-jquery/

https://jqueryui.com/about/

https://jquery.com/

http://www.markomdizajn.com/blog/jquery-tutorijal-za-apsolutne-pocetnike

http://www.markomdizajn.com/blog/jquery-tutorijal-za-apsolutne-pocetnike

http://blog.falcon-tech.rs/2012/02/09/sta-je-jquery/sta-je-jquery/

http://www.mojwebdizajn.net/web-programiranje/vodic/jquery/uvod-u-jquery.aspx

http://www.popwebdesign.net/popart_blog/2014/02/sta-je-jquery/